<template>
  <view class="popup">
    <up-popup
      :show="show"
      mode="center"
      :closeable="true"
      :safeAreaInsetBottom="false"
      @close="close"
      @open="open"
    >
      <view class="content">
        <view class="top">
          <view class="title">加急匹配</view>
        </view>
        <view class="reason">
          {{ $data.tips }}
        </view>
        <view class="text-bold margin-bottm flex justify-start width-p-100">
          加价金额
        </view>
        <view class="price-box">
          <view
            class="price u-line-2"
            :class="[{ 'price-active': item._check }]"
            v-for="(item, index) of $data.list"
            :key="index"
            @tap="onCheck(item, index)"
          >
            <text>{{ item.value }}</text>
            <text>{{ item.unit }}</text>
          </view>
        </view>
        <view class="confirm foot_box">
          <view class="btn btn_cancel" @tap="close">取消</view>
          <view class="btn btn_save" @tap="onConfirm"> 确定 </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { reactive, ref, nextTick, computed, onMounted, watch } from "vue";
import { useGetConfig } from "../../../../hooks/useCommon";
import { configKeyEnum } from "../../../../enums/common";
import BasicConfig from "../../../../utils/config";
import { urgentDetail } from "../../../../api/Interface/order";
import errorCode from "../../../../utils/http/errorCode";
const $emit = defineEmits(["update:show", "close", "confirm"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const $data = reactive({
  list: [],
  tips: "",
});
const init = () => {
  urgentDetail().then((res) => {
    if (res.code === errorCode.success) {
      $data.tips = res.data.urgent_tips;
      $data.list = res.data.urgent_price;
      $data.list.map((m) => (m._check = false));
    }
  });
};

const onCheck = (item, index) => {
  $data.list.map((m, i) => (m._check = index === i));
};

const close = () => {
  $emit("update:show", false);
};
const open = () => {
  init();
};
const onConfirm = () => {
  const item = $data.list.find((l) => l._check);
  $emit("confirm", item);
  close();
};
onMounted(() => {});
</script>
<script>
// 小程序穿透
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 30rpx !important;
    // max-height: 80vh;
    width: 90vw;
  }
  ::v-deep .u-popup__content__close {
    z-index: 999999;
  }
  .content {
    background: #ffffff;
    border-radius: 30rpx;
    width: 90vw;
    padding: 30rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .top {
      background: #ffffff;
      position: sticky;
      top: 0;
      z-index: 9999;
    }
    .title {
      background: #ffffff;
      padding: 20rpx;
      font-size: 34rpx;
      border-bottom: 1px solid #f0f0f0;
      font-weight: 700;
    }
    .reason {
      color: #666666;
      margin-bottom: 60rpx;
      margin-top: 30rpx;
    }
    .price-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 30rpx;
      flex-direction: row;
      width: 100%;
      .price {
        width: calc(94% / 3);
        margin-bottom: 30rpx;
        padding: 20rpx;
        text-align: center;
        border-radius: 20rpx;
        border: 1px solid #cccccc;
        &:not(:nth-of-type(3n)) {
          margin-right: 3%;
        }
      }
      .price-active {
        background: #e4f9f9;
        border: 1px solid #00adad;
      }
    }
    .confirm {
      width: 100%;
      background: #ffffff;
      z-index: 9999;
      margin-top: 60rpx;
      padding: unset;
      .btn {
        height: unset;
        line-height: unset;
        padding: 30rpx;
      }
    }
  }
}
</style>
